<template>
	<view class="content">
		<my-header :title="parentTitle" @instruct="handinstruct" />
		<scroll-view :style="{paddingTop:padding + 'rpx',paddingBottom:paddingbot + 'rpx'}" :scroll-y="true"
			class="content-content" @scroll="handleScroll">
			<view class="scrollvie-content">
				<view class="ServiceTypeBox">
					<view class="stateBox">
						<view style="margin-top: 20rpx;" v-if="orderdetaildata.refundStatus == 0">
							<p class="title">待商家处理中</p>
							<p class="title1">商家将在1-2个工作日内为您处理</p>
						</view>
						<view style="margin-top: 20rpx;" v-if="orderdetaildata.refundStatus == 1">
							<p class="title">商家已同意退货</p>
							<p class="title1">请将商品寄往以下地址</p>
							<p class="title1">处理时间: {{orderdetaildata.modifyTime}}</p>
						</view>
						<view style="margin-top: 20rpx;" v-if="orderdetaildata.refundStatus == 2">
							<p class="title">退款完成</p>
							<p class="title1">商家已同意退款，退款金额已原路退回</p>
							<p class="title1">处理时间: {{orderdetaildata.modifyTime}}</p>
						</view>
						<view style="margin-top: 20rpx;" v-if="orderdetaildata.refundStatus == 3">
							<p class="title">商家已拒绝</p>
							<p class="title1">拒绝原因: {{orderdetaildata.reason}}</p>
							<p class="title1">处理时间: {{orderdetaildata.modifyTime}}</p>
						</view>
						<view class="addrBox" v-if="orderdetaildata.refundStatus == 1">
							<image :src="proxy.serverimageUrl + 'orderdetail/addr.png'" mode=""></image>
							<view class="addrtext">
								<p class="textp1">{{orderdetaildata.comAddr}}{{orderdetaildata.address}}</p>
								<p class="textp2">
									{{orderdetaildata.comName}}&nbsp;&nbsp;&nbsp;{{orderdetaildata.comPhone}}
								</p>
							</view>
						</view>
					</view>

				</view>
				<view class="logisticsBox" v-if="orderdetaildata.logisticsNo">
					<p class="title">{{orderdetaildata.logisticsInfoDto.expressCompany}}:
						{{orderdetaildata.logisticsNo}}
					</p>
					<view class="kong-line">

					</view>
					<view class="setps">
						<view class="setps-item" v-for="(item,index) in orderdetaildata.logisticsInfoDto.list"
							:key="index">
							<view class="setps-item-left">
								<view :class="[setupnum == index ? 'round' :'rounds']">

								</view>
								<view :class="[setupnum == index ? 'colline' :'collines']">

								</view>
							</view>
							<view class="setps-item-right">
								<p class="addrtitle">{{item.wremark}}</p>
								<p class="addrtime">{{item.wtime}}</p>
							</view>
						</view>
					</view>
				</view>
				<view class="commodityBox">
					<p class="title">退货信息</p>
					<view class="shopitem" v-for="(item,index) in orderdetaildata.orderDetailDtos" :key="index">
						<view class="center-image">
							<image :src="item.commonFileEntities[0].url" mode=""></image>
						</view>
						<view class="right-information">
							<p class="title">{{item.cname}}</p>
							<view class="selectBox">
								<view>{{item.sname}},{{item.specificationsSize}}</view>
							</view>
							<view class="priceAndnum">
								<view class="left-price">
									￥{{item.totalPrice}}
								</view>
								<view class="right-number">
									x{{item.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="refunddetail">
						<view class="kong-line">

						</view>
						<view class="publicsty" v-if="orderdetaildata.refundId">
							<view class="publicsty-left">
								退款金额<span class="spantext">共{{orderdetaildata.refundNumber}}件商品</span>
							</view>
							<view class="publicsty-right">
								￥{{orderdetaildata.totalPrice}}
							</view>
						</view>
						<view class="publicsty">
							<view class="publicsty-left">
								退款原因
							</view>
							<view class="publicsty-right publicsty-text">
								{{orderdetaildata.remark}}
							</view>
						</view>
						<view class="publicsty">
							<view class="publicsty-left">
								申请时间
							</view>
							<view class="publicsty-right publicsty-text">
								{{orderdetaildata.createTime}}
							</view>
						</view>
						<view class="publicsty">
							<view class="publicsty-left">
								退款编号
							</view>
							<view class="publicsty-right publicsty-text">
								{{orderdetaildata.refundNo}}
							</view>
						</view>
					</view>
				</view>
				<view class="problem">
					<p class="title2">图片凭证</p>
					<view class="imageBox">
						<view class="imageitem" v-for="(item,index) in orderdetaildata.commonFileEntities">
							<image :src="item.url" mode=""></image>
						</view>
					</view>
				</view>
				<view style="background-color: #f2f2f2;height: 30rpx;width: 100%;">

				</view>
			</view>
		</scroll-view>
		<view class="bottom-btnBox"
			v-if="orderdetaildata.refundId && (orderdetaildata.refundStatus == 3 || orderdetaildata.refundStatus == 1) ">
			<view class="box">
				<view></view>
				<view class="btnbox" v-if="orderdetaildata.refundStatus == 0 || orderdetaildata.refundStatus == 1">
					<up-button :text="btntext" @click="submit" color="#013CAA"></up-button>
				</view>
				<view class="btnbox" v-if="orderdetaildata.refundStatus == 3">
					<up-button :plain="true" :text="btntext" @click="submit" color="#013CAA"></up-button>
				</view>
			</view>

		</view>
		<up-popup :show="Popshow" :round="10" mode="center" @close="Popclose" @open="Popopen">
			<view class="popcontent">
				<view class="inputcontent">
					<up-input placeholder="请输入物流单号" border="none" v-model="inputvalue" @change="change"></up-input>
				</view>
				<view class="btnbox">
					<view class="btn">
						<up-button @click="Popshow = false" :plain="true" text="取消"></up-button>
					</view>
					<view class="btn">
						<up-button color="#013CAA" @click="addlogisicsNo" text="确定"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		getCurrentInstance
	} from 'vue';
	import {
		orderDetailByOrderId,
		savaRefundRecord,
		queryRefundRecordByID,
		addLogisticsNo
	} from '../../utils/api.js'
	import BASE_URL from '@/utils/env.js' //引入接口共用地址 //引入仓库，使用的是pinia
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()

	const baseUrl = BASE_URL
	const submittype = ref('')
	const btntext = ref('')
	const current = ref('')
	const inputvalue = ref('')
	const refundId = ref('')
	onLoad((o) => {
		submittype.value = o.type
		current.value = o.current
		if (o.refundId) {
			refundId.value = o.refundId
			getrefunddetail(o.refundId)
		}
	})
	const paddingbot = ref(100)
	const orderdetaildata = ref({})
	const addlogisicsNo = () => {
		let params = {
			logisticsNo: inputvalue.value,
			refundId: orderdetaildata.value.refundId
		}
		addLogisticsNo(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					duration: 1000,
					icon: 'success'
				})
				getrefunddetail(refundId.value)
				Popclose()
			}
		})
	}
	const getrefunddetail = (refundId) => {
		queryRefundRecordByID(refundId).then(res => {
			if (res.code == 200) {
				orderdetaildata.value = res.data
				console.log(orderdetaildata.value);
				if (orderdetaildata.value.refundStatus && orderdetaildata.value.refundStatus == 3) {
					btntext.value = '重新申请'
				} else if (orderdetaildata.value.refundStatus && orderdetaildata.value.refundStatus == 1 &&
					!orderdetaildata.value.logisticsNo) {
					btntext.value = '商品已寄出'
				} else if(orderdetaildata.value.refundStatus && orderdetaildata.value.refundStatus == 1 &&
					orderdetaildata.value.logisticsNo){
						btntext.value = '修改物流单号'
				}else{
					paddingbot.value = 0
				}
			}
		})
	}
	const setupnum = ref(0)
	/*头部组件自定义title*/
	const parentTitle = ref('售后服务')
	/*控制弹窗显示*/
	const Popshow = ref(false)
	/*弹窗关闭事件*/
	const Popclose = () => {
		Popshow.value = false
		inputvalue.value = ''
	}
	/*弹窗打开事件*/
	const Popopen = () => {
		Popshow.value = true
	}
	/*控制button按钮显示*/
	const btnactive = ref(0)
	/*控制button的事件*/
	const btnact = (type) => {
		btnactive.value = type
	}
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.navigateBack({
					delta: 1
				})
				break;
		}
	}
	/*根据下滑事件判断内边距*/
	const padding = ref(30);
	/*滑动事件*/
	const handleScroll = (event) => {
		// 检查滚动位置，如果需要取消padding，则设置padding为0
		if (event.detail.scrollTop > 10) { // 100是一个阈值，表示在滚动100px后取消padding
			padding.value = 0;
		} else {
			padding.value = 30; // 恢复初始padding
		}
	}
	const submit = () => {
		if (btntext.value == '重新申请') {
			uni.redirectTo({
				url: '/subpages/AfterSales/index?refundId=' + orderdetaildata.value.refundId + '&current=' +
					current.value
			})
		} else {
			Popshow.value = true
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		background-color: #F2F2F2;
		width: 100vw;

		.content-content {
			box-sizing: border-box;
			padding: 30rpx 30rpx 100rpx;
			height: calc(100vh - 194rpx);

			.scrollvie-content {
				.ServiceTypeBox {
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 40rpx 37rpx;

					.reason {
						.title {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #303030;
							line-height: 28rpx;
						}

						.btnbox {
							margin-top: 30rpx;
							display: flex;

							.btnitem {
								width: 190rpx;
								height: 100rpx;
								background: #F8F8F8;
								border-radius: 8rpx;
								border: 1rpx solid #EEEEEE;
								margin-right: 24rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.btnitemact {
								background: #EDF3FF;
								border-radius: 8rpx;
								display: flex;
								position: relative;
								align-items: center;
								justify-content: center;
								border: 1px solid #013CAA;

								.selectedimg {
									width: 43rpx;
									height: 42rpx;
									position: absolute;
									right: 0;
									bottom: 0;
								}
							}
						}
					}

					.stateBox {
						.title {
							font-family: Source Han Sans SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #303030;
							line-height: 36rpx;
						}

						.title1 {
							margin-top: 18rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #BFBFBF;
							line-height: 24rpx;
						}

						.addrBox {
							margin-top: 40rpx;
							width: 100%;
							padding: 36rpx;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							background-color: #EEEEEE;

							image {
								width: 74rpx;
								height: 74rpx;
							}

							.addrtext {
								margin-left: 30rpx;

								.textp1 {
									font-family: Source Han Sans SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #303030;
									line-height: 28rpx;
								}

								.textp2 {

									margin-top: 18rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #636363;
									line-height: 26rpx;
								}
							}
						}
					}
				}

				.logisticsBox {
					padding: 35rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					margin-top: 30rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
					}

					.kong-line {
						width: 100%;
						height: 1rpx;
						margin-top: 28rpx;
						background: #DFDFDF;
					}

					.setps {
						margin-top: 50rpx;

						.setps-item {
							display: flex;

							.setps-item-left {
								width: 30rpx;
								display: flex;
								flex-direction: column;
								align-items: center;

								.round {
									width: 30rpx;
									height: 30rpx;
									background: #FFFFFF;
									border-radius: 50%;
									border: 8rpx solid #4A87F8;
								}

								.rounds {
									width: 14rpx;
									height: 14rpx;
									background: #DEDEDE;
									border-radius: 50%;
								}

								.colline {
									width: 2rpx;
									height: calc(100% - 30rpx);
									background: #DEDEDE;
								}

								.collines {
									width: 2rpx;
									height: calc(100% - 14rpx);
									background: #DEDEDE;
								}
							}

							.setps-item-right {
								margin-left: 30rpx;
								height: 120rpx;

								.addrtitle {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #303030;
									line-height: 28rpx;
								}

								.addrtime {
									margin-top: 22rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									line-height: 24rpx;
									color: #9B9B9B;
								}
							}
						}

					}

					.setps-item:last-child {
						.setps-item-left {
							.colline {
								display: none;
							}

							.collines {
								display: none;
							}
						}

					}

				}

				.commodityBox {
					margin-top: 30rpx;
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 39rpx 30rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #303030;
						line-height: 30rpx;
					}

					.shopitem {
						margin-top: 36rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-ridio {
							.radio-content {
								transform: scale(0.65)
							}
						}

						.center-image {
							width: 180rpx;
							height: 180rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.right-information {
							width: 348rpx;
							margin-left: 31rpx;

							.title {
								font-family: SourceHanSansSC;
								font-weight: 500;
								font-size: 30rpx;
								color: #303030;
								line-height: 40rpx;
							}

							.selectBox {
								margin-top: 20rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #636363;
								line-height: 40rpx;
							}

							.priceAndnum {
								margin-top: 49rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.left-price {
									font-family: SourceHanSansSC;
									font-weight: 500;
									font-size: 36rpx;
									color: #013CAA;
									line-height: 40rpx;
								}

								.right-number {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #636363;
								}
							}
						}
					}

					.refunddetail {
						margin-top: 42rpx;

						.kong-line {
							width: 100%;
							height: 1rpx;
							background: #EEEEEE;
						}

						.publicsty {
							margin-top: 41rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.publicsty-left {
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #303030;
								line-height: 28rpx;

								.spantext {
									margin-left: 20rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #929292;
								}
							}

							.publicsty-right {
								font-family: Source Han Sans SC;
								font-weight: 500;
								font-size: 32rpx;
								color: #303030;
								line-height: 32rpx;
							}

							.publicsty-text {
								font-family: Source Han Sans SC;
								font-weight: 400 !important;
								font-size: 28rpx !important;
								color: #303030;
								line-height: 28rpx;
							}

						}
					}
				}

				.problem {
					margin-top: 31rpx;
					width: 100%;
					background: #FFFFFF;
					padding: 35rpx 38rpx;
					border-radius: 20rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
						line-height: 28rpx;
					}

					.title2 {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
						line-height: 28rpx;
						margin-bottom: 30rpx;

					}

					.imageBox {
						display: flex;
						flex-wrap: wrap;

						.imageitem {
							width: 142rpx;
							height: 140rpx;
							margin-right: 10rpx;
							border-radius: 8rpx;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.bottom-btnBox {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 15rpx 30rpx;
			background: #FFFFFF;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btnbox {
					width: 240rpx;
					height: 80rpx;
				}
			}

		}

		::v-deep .u-popup {
			.u-popup__content {

				.popcontent {
					width: 570rpx;
					padding: 48rpx 30rpx;

					.inputcontent {
						background: #F8F8F8;
						height: 100rpx;
						display: flex;
						align-items: center;
						padding-left: 20rpx;

						.u-input {}
					}
				}

				.btnbox {
					margin-top: 38rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 240rpx;
						height: 80rpx;
					}
				}
			}
		}

	}
</style>